<!-- 编辑资料 -->
<template>
	<view class="index pd-lr36 fs28">
		
		<headerUp/>
		<view class="list">
			<view @click="handlePath(item)" class="items" v-for="(item, index) in list" :key="index">
				<text>{{ item.title }}</text>
				<view class="disflex">
					<view :class="{'person-info':item.title == '个人简介' && item.info}">{{ item.info || '未填写' }}</view>
					<view class="rights"><image src="/static/icon/right.png" mode="center"></image></view>
				</view>
			</view> 
		</view>
		<uni-popup ref="popups" type="bottom">
			<view class="apple-radio">
				<view class="integral i1" @click="handleClose(1)" :class="{ actives: sexIndex === 1 }">男</view>
				<view class="integral i2" @click="handleClose(2)" :class="{ actives: sexIndex === 2 }">女</view>
				<view class="integral i3" @click="handleClose(0)" :class="{ actives: sexIndex === 0 }">不展示</view>
			</view>
		</uni-popup>
		<w-picker
			mode="date"
			:defaultVal="birthdayValue"
			:current="false"
			class="date"
			@confirm="onConfirmDate"
			ref="dates"
			:switchsData="birthdaySwtich"
			themeColor="#f00"
		></w-picker>
		<w-picker
			mode="region"
			class="region"
			:defaultVal="addressValue"
			hideArea
			@confirm="onConfirmRegion"
			ref="region"
			themeColor="#f00"
			:switchsData="addressSwtich"
			:timeout="true"
		></w-picker>
	</view>
</template>

<script>
import uniPopup from '@/components/uni-popup/uni-popup.vue';
import headerUp from "../components/headerUp.vue"
import wPicker from '@/components/w-picker/w-picker.vue';
import { apiPostInfoUpdate } from '@/api/me.js';

import {dates} from "@/utils/common.js"
export default {
	components: {
		uniPopup,
		wPicker,
		headerUp
	},
	computed:{
		birthdaySwtich(){
			return this.list[4].info == '不展示'
		},
		birthdayValue(){
			return this.list[4].info == '不展示'? '2000-01-01' : this.list[4].info
		},
		addressSwtich(){
			return this.list[5].info == '不展示'
		},
		addressValue(){
			return this.list[5].info == '不展示'? ['北京市',"北京市"] : this.list[5].info.split("-")
		},
		
	},
	onShow() {
		this.init()
	},
	data() {
		return {
			info: {user_info:{nickname:""}},
			sexIndex: 0,  //性别
			list: [
				{ title: '昵称', info: '', type: { type: 'path', url: '' } },
				{ title: '个人简介', info: '', type: { type: 'path', url: '' } },
				{ title: '手机号', info: '', type: { type: 'path', url: '' } },
				{ title: '性别', info: '', type: { type: 'sex' } },
				{ title: '生日', info: '', type: { type: 'date' } },
				{ title: '地区', info: '', type: { type: 'city' } }
			]
		};
	},
	methods: {
		init(){
			return new Promise((resfn)=>{
				this.info = uni.getStorageSync('userinfo');
				uni.setNavigationBarTitle({
					title: this.info.user_info.nickname
				});
				if(this.info.user_info.address == '00'){
					this.info.user_info.address_text = '不展示'
					delete this.info.user_info.address
				}
				this.list.map((item, index) => {
					switch (index) {
						case 0:
							item.info = this.info.user_info.nickname;
							item.type.url = '/pages/me/edit/nickname?nickname='+ this.info.user_info.nickname
							break;
						case 1:
							item.info = this.info.user_info.intro;
							item.type.url = '/pages/me/edit/personal?intro='+ this.info.user_info.intro;
							break;
						case 2:
							item.info = this.info.mobile;
							item.type.url = '/pages/me/edit/phone?mobile='+ this.info.mobile;
							break;
						case 3:
							this.sexIndex = this.info.user_info.sex;
							item.info = this.info.user_info.sex_text;
							break;
						case 4:
							item.info = this.info.user_info.birthday || this.info.user_info.birthday_text;
							break;
						case 5:
							item.info = this.info.user_info.address || this.info.user_info.address_text;
							break;
					}
				});
				resfn()
			})
			
		},
		handlePath(data) {
			switch (data.type.type) {
				case 'path':
					 this.$navTo.togo(data.type.url)
					break;
				case 'sex':
					this.$refs.popups.open();
					break;
				case 'date':
					this.$refs.dates.show();
					break;
				case 'city':
					this.$refs.region.show();
					break;
			}
		},
		// 性别
		handleClose(index) {
			this.sexIndex = index
			this.$refs.popups.close();
			this.list[3].info = this.sexIndex == 0?'不展示':this.sexIndex == 1?"男":'女'
			this.editInfo({sex:this.sexIndex});
		},
		// 生日
		onConfirmDate(data) {
			if( dates('本月')[1] < data.result) {
				return uni.showToast({
					'title':'不能选今天之后',
					icon:'none'
				})
			}
			if(data.switch){
				this.list[4].info = "不展示"
				this.editInfo({birthday:""});
			}else{
				this.list[4].info = data.result
				this.editInfo({birthday:data.result});
			}
		},
		// 地区
		onConfirmRegion(data) {
			
			if(data.switchRegion){
				this.list[5].info = "不展示"
				this.editInfo({address:""});
			}else{
				this.list[5].info = data.checkArr[0]+"-"+data.checkArr[1]
				this.editInfo({address:data.checkArr[0]+"-"+data.checkArr[1]});
			}
		},
		editInfo(obj) {
			apiPostInfoUpdate(obj);
		}
	},
	// 下拉刷新
	onPullDownRefresh() {
		this.init().then(()=>{
			uni.stopPullDownRefresh();  //停止下拉刷新动画
		})
	}
};
</script>

<style scoped lang="scss">
.handerimg {
	border-bottom: 1px solid #1c1b2b;
	margin-bottom: 40upx;
}

.imgs {
	background: #000;
	border-radius: 50%;
	width: 100upx;
	height: 100upx;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 40upx auto;
}

.box {
	.text {
		font-size: 12px;
		color: rgba(116, 115, 132, 1);
		margin-bottom: 80upx;
	}
}

.disflex {
	display: flex;
	color: #747384;
	justify-content: flex-end;
	align-items: center;
	flex: 1;
	padding-left: 40upx;
}



.list {
	padding-bottom: 40upx;
	border-bottom: 1px solid #1c1b2b;
	.items {
		display: flex;
		justify-content: space-between;
		padding: 30upx 0;
	}
	.person-info{
		width: 90%;
		text-align: justify;
		word-break:break-all;
	}
	.rights {
		width: 28upx;
		height: 28upx;
		transform: translateY(3upx);
		margin-left: 30upx;
	}
}
.apple-radio {
	width: 100%;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;

	margin-bottom: 20upx;
}
.integral {
	line-height: 55 * 2upx;
	width: 355 * 2upx;
	text-align: center;
	font-size: 32upx;
	color: rgba(10, 132, 255, 1);
	background: rgba(255, 255, 255, 0.85);
}
.integral.actives {
	background: rgba(255, 255, 255, 1);
}
.i1 {
	border-radius: 28upx 28upx 0px 0px;
}
.i2 {
	margin-bottom: 3upx;
}
.i3 {
	border-radius: 0 0 28upx 28upx;
	margin-bottom: 16upx;
	color: rgba(252, 49, 90, 1);
}
.i4 {
	border-radius: 28upx;
	background: rgb(255, 255, 255);
}
.region {
	color: #0c0b18;
}
.date {
	color: #0c0b18;
}
</style>
